<template>
  <view>
	  <input type="text" placeholder="请输入..." v-model="title"/><button @click="sendfn">发布</button>
    <view v-for="(item, index) in arr" :key="index">
      {{ item.id }}:{{ item.title }}
      <button @click="delfn(item.id)">删除</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'; 

const arr = ref([]);
const title = ref('');

const loadlist = () => {
  uni.request({
    url: 'http://localhost:3000/todos',
    method: 'GET',
    success: (res) => {
      arr.value = res.data;
      console.log('加载列表成功', res.data);
    },
    fail: (err) => {
      console.error('加载列表失败', err);
    },
  });
};
onMounted(() => {
  loadlist(); 
});
const delfn = (id) => {
  uni.request({
    url: `http://localhost:3000/todos/${id}`, 
    method: 'DELETE',
    success: (res) => {
      loadlist(); 
    },
    fail: (err) => {
      console.error('删除失败', err);
    },
  });
};
const sendfn = () => {
  if (!title.value.trim()) {
    uni.showToast({ title: '请输入待办内容', icon: 'none' });
    return;
  }
  const newTodo = {
    title: title.value,
    id: Date.now(),
    completed: false,
  };
  uni.request({
    url: 'http://localhost:3000/todos', 
    method: 'POST',
    data: newTodo,
    success: (res) => {
      loadlist(); 
      title.value = '';
      console.log('发布成功', res);
    },
    fail: (err) => {
      console.error('发布失败', err);
    },
  });
};
</script>

<style>

</style>